@use "sass:color"
@use "../../shared/settings/colors"
@use "../../shared/settings/fonts"

%base-button-styles
  transition: all 250ms ease-in-out
  font-family: fonts.$helvetica-neue
  font-size: 14px
  padding: 9px 12px
  cursor: pointer
  background-color: colors.$gallery-gray
  color: colors.$dark-gray
  border: 1px solid transparent
  text-transform: capitalize

%default-button
  @extend %base-button-styles
  border-color: rgba(0, 0, 0, 0.1)

  &:hover
    background-color: color.adjust(colors.$gallery-gray, $lightness: -15%)

%red-button
  @extend %base-button-styles
  background-color: colors.$ir-red
  color: colors.$white

  &:hover
    background-color: color.adjust(colors.$ir-red, $lightness: -15%)

%add-button
  &:before
    content: "+"
    display: inline-block
    font-size: 20px
    line-height: 10px
    font-weight: bold
    margin-right: 3px




